<template>
  <div>
    <div class="ub inputBox ub-ver">
      <div class="ub mar_05 h_3 bg_w ub-pj ub-ac uhide">
        <div class="fc-8b">手机号快速登录</div>
        <div class="clk_yzm" @click="toggleYzm">{{clic_text}}</div>
      </div>
      <!-- <div class="ub mar_05 h_3 ub-ac ub-pj">
        <input type="number" placeholder="手机号" class="ub" :value="this.$store.state.forgetPd.phone" @input="phoneChange">
        <div class="ub-img1 clear_icon" @click='clearClick' v-show="this.$store.state.forgetPd.phone" ></div>
      </div> -->
      <!-- <div class="ub mar_05 h_3 ub-ac">
        <input placeholder="验证码" class="wd_50 ub" :value="this.$store.state.forgetPd.yzm" @input="yzmChange">
        <div class="yzm wd_50" @click="getyzm">{{getYzm_text}}</div>
      </div> -->
      <yzmInput :getYzm_text="getYzm_text" :yzmType="yzmType" :optType="optType"></yzmInput>
      <div class="ub login mar_05 ub-pc ub-ac" @click='nextClc'>
        <div>登录</div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
// import headerDiv from 'components/header/header.vue';
import yzmInput from 'components/yzmInput/yzmInput.vue';
const MES = 0;
const VOIC = 1;
const TXT = [
  { yzm: '获取短信验证码', toggle: '→收不到短信，使用语音验证码' },
  { yzm: '获取语音验证码', toggle: '→不方便接听，使用短信验证码' }
];
export default {
  name: 'forgetPd',
  data: function () {
    return {
      // pho_num: '',
      // yzm_num: '',
      yzmType: MES,
      optType: '3'
      // yzm_text: this.getYzm_text(),
      // clic_text: this.getYlic_text()
    }
  },
  created: function () {
    this.$store.commit('changeHeader', {
      left: '返回',
      right: '',
      middle: '快速登录',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
  },
  components: {
    yzmInput
  },
  methods: {
    // clearClick: function () {
    //   // console.log('123');
    //   this.$store.commit('clearPh');
    // },
    checkPho: function () {
      let pho = this.$store.state.forgetPd.phone;
      let phoReg = /^1\d{10}$/;
      if (!phoReg.test(pho)) {
        this.$store.dispatch('showTx', { text: '请输入正确的手机号' });
        return false;
      }
      return pho;
    },
    checkYzm: function () {
      let yzm = this.$store.state.forgetPd.yzm;
      let yzmReg = /^\d{6}$/;
      if (!yzmReg.test(yzm)) {
        this.$store.dispatch('showTx', { text: '请输入正确的验证码' });
        return false;
      }
      return yzm;
    },
    nextClc: function () { // 下一步
      let pho = this.checkPho();
      if (!pho) {
        return false
      }
      let yzm = this.checkYzm();
      console.log(pho + '|' + yzm);
      if (!pho || !yzm) {
        return false;
      }
      let content = {
        'code': yzm,
        'userMobile': pho
      };
      let data = this.$utils.getUserContent(content);
      console.log(data);
      this.$http.post(this.$RS.fastLogin, data).then(
        function (res) {
          // 响应成功回调
          this.$store.commit('closePop');
          res = res.body;
          console.log(res);
          if (res.code === 1000) {
            let userInfo = res.content;
            // console.log(userInfo);
            this.$store.commit('setLogin', userInfo);
            // console.log(this.$store.state.loginData);
            // 设置sessionStorage
            this.$utils.setSession('loginData', userInfo)
            this.$store.commit('clearBoth');
            this.$router.go('-2');
          } else {
            console.log('out');
            this.$store.dispatch('showTx', { text: res.message });
          }
        },
        function (err) {
          console.log(err);
          this.$store.commit('closePop');
          // 响应错误回调
          this.$store.dispatch('showTx', { text: err.message || '网络错误，请重试' });
        }
      );
    },
    // getyzm: function () { // 获取验证码
    //   let pho = this.checkPho();
    //   if (!pho) {
    //     return false;
    //   }
    //   console.log('yzm');
    //   // let timestamp = new Date().getTime() + '';
    //   let content = {
    //     'optType': '3', // 3忘记密码 2找回密码
    //     'userMobile': pho
    //   }
    //   // let data = {
    //   //   headers: {
    //   //     // "devModel": "iPhone",
    //   //     appPlatform: 'NativeH5',
    //   //     // "devSystem": "iOS",
    //   //     // "devImei": "BDC9921442384C6A",
    //   //     appFrom: 'westAirH5',
    //   //     // "systemVersion": "0",
    //   //     // "versionCode": "0",
    //   //     // "devToken": "BDC9921442384C6A",
    //   //     timestamp: timestamp
    //   //   },
    //   //   sign: this.$utils.getSign(content, timestamp),
    //   //   content: content
    //   // };
    //   let data = this.$utils.getUserContent(content);
    //   this.$store.commit('showLoading');
    //   this.$http.post(this.$RS.smsLogin, data).then(
    //     function (res) {
    //       // 响应成功回调
    //       this.$store.commit('closePop');
    //       res = res.body;
    //       console.log(res);
    //       if (res.code === 1000) {
    //         this.$store.dispatch('showTx', { text: res.message });
    //         // this.$store.commit('setLogin', userInfo);
    //       } else {
    //         console.log('out');
    //         this.$store.dispatch('showTx', { text: res.message });
    //       }
    //     },
    //     function (err) {
    //       console.log(err);
    //       // 响应错误回调
    //       this.$store.dispatch('showTx', { text: err.message || '网络错误，请重试' });
    //     }
    //   );
    // },
    toggleYzm: function () {
      // console.log('tyzm')
      this.yzmType = this.yzmType === MES ? VOIC : MES;
    },
    // phoneChange: function (e) {
    //   // console.log(e.target.value);
    //   this.$store.commit('changePhone', e.target.value);
    //   // this.$store.state.forgetPd.phone = e.target.value;
    // },
    yzmChange: function (e) {
      this.$store.commit('changeYzm', e.target.value);
    }
  },
  computed: {
    getYzm_text: function () {
      // console.log('text');
      // console.log(TXT);
      // console.log(TXT[this.yzmType])
      // return TXT[this.yzmType].yzm;
      return TXT[this.yzmType].yzm;
    },
    clic_text: function () {
      return TXT[this.yzmType].toggle;
    }
  }
}
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
.clear_icon
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('form_clear@2x.png');
.fc-8b
  color: #8b8b8b;
.clk_yzm
  color: #843d99;
  font-size: f_times(0.675);
</style>